<!-- 岗位操作指引 -->
<template>
  <div>
    <base-breadcrumb>
      <a-row :gutter="10" class="page-height">
        <!-- 树搜索 -->
        <a-col :span="6">
          <a-card class="page-height-tree">
            <title-name title="基础组织架构" />
            <!-- 公司组织树搜索 -->
          <tree-organization
            ref="treeOrganization"
            :expand-by-auto="true"
            :selected-keys.sync="selectedKeys"
            :select-options.sync="selectOptions"
            :contain-virtual="$route.meta.isCompany"
            :org-query="orgQuery"
            :show-child-with-search="true"
            :filter-fn="handleFilterTree"
            @loader="getTable"
            @onOrgSelect="orgSelect"
          />
          </a-card>
        </a-col>
        <a-col :span="18" class="page-height-list-wrapper">
          <searchData :search-data="searchArr" @search="handleSearch" />
          <a-card class="mb20 page-height-list">
            <!-- <title-name title="基础岗位信息列表" /> -->
            <list-table
              ref="table"
              rowkey="id"
              :columns="columns"
              :request="loadData"
              :alert="true"
            >
              <template slot="operation" slot-scope="text, record">
                <div class="pub-table-list-action">
                  <span v-btnPermission="'sy_009_gui_01'" @click="handleOperation(record)">岗位操作指引</span>
                </div>
              </template>
            </list-table>
            <!-- <a-table :pagination="pagination" :columns="columns" :data-source="tableData" row-key="id">
              <template slot="leaderPostName" slot-scope="text">
                {{ text || '无' }}
              </template>
              <template slot="operation" slot-scope="text, record">
                <div class="pub-table-list-action">
                  <span v-btnPermission="'sy_009_gui_01'" @click="handleOperation(record)">岗位操作指引</span>
                </div>
              </template>
            </a-table> -->
          </a-card>
        </a-col>
      </a-row>
    </base-breadcrumb>
    <operation-guideForm v-if="isOpen" @click="dialogFn" :formData="formDataObj" />
  </div>
</template>

<script>
import OperationGuideForm from './OperationGuideForm.vue'
import TreeOrganization from '@/components/businessComponents/TreeOrganization' // 树
import { getOrgManageList, queryAcloudPostManualList } from '@/api/system/system'
export default {
  name: 'BaseOrganizationManage',
  components: {
    TreeOrganization,
    OperationGuideForm
  },
  data() {
    return {
      isOpen: false,  // 弹窗控制参数
      searchArr: [
        // 搜索框
        {
          name: '岗位名称',
          value: 'postName',
          type: 'input'
        },
        {
          name: '岗位标签',
          value: 'postTags',
          type: 'input'
        }
      ],

      // 公司组织表头
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          align: 'center',
          width: 100,
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '所属组织',
          dataIndex: 'orgName',
          key: 'orgName'
        },
        {
          title: '岗位名称',
          dataIndex: 'postName',
          key: 'postName'
        },
        {
          title: '岗位编号',
          dataIndex: 'postCode',
          key: 'postCode'
        },
        {
          title: '岗位标签',
          dataIndex: 'postTags',
          key: 'postTags'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          width: '220px',
          fixed: 'right',
          scopedSlots: {
            customRender: 'operation'
          }
        }
      ],
      tableData: [],
      selectedKeys: [], // 选中节点
      selectOptions: {}, // 选中节点对象
      selectedOrg: {},
      pagination: {
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 10, // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        showTotal: (total) => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.pagination.defaultCurrent = 1
          this.pagination.defaultPageSize = pageSize
          this.getTable() //显示列表的接口名称
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.pagination.defaultCurrent = current
          this.pagination.defaultPageSize = size
          this.getTable()
        }
      },
      pathName: this.$route.path,

      isTableList: false,
      queryParam: {},  // 搜索参数
      loadData: (parameter) => {
        if (!this.isTableList) return false;
        let searchData = {
          needCount: true,
          ...parameter
        }
        const requestParameters = Object.assign({}, searchData, {query: {...this.queryParam,orgId: this.selectedKeys[0]}})

        return queryAcloudPostManualList(requestParameters).then((res) => {
          return res
        })
      }, // 加载数据方法 必须为 Promise 对象

      formDataObj: {} // 弹窗参数
    }
  },
  computed: {
    orgQuery() {
      return {
        baseOrgType: 1,
        containVirtual: ''
      }
    },
  },
  mounted() {
    this.$refs.treeOrganization.getList().then((res) => {
      this.getTable()
    })

    this.$bus.$on('handleRefresh' + this.pathName, () => {
      this.getTable()
    })
  },
  beforeDestroy() {
    this.$bus.$off('handleRefresh' + this.pathName)
  },
  methods: {
    handleFilterTree(data) {
      if (!this.$route.meta.isCompany) {
        return data.label !== '分包商'
      }
      return true
    },
    /**
     *@desc  获取组织列表
     *@param {}
     */
    getTable() {
      let that = this
      if (that.selectedKeys && that.selectedKeys.length > 0) {
        // this.pagination.defaultCurrent=1
        // 获取列表
        // setTimeout(that.handleSearch(this.queryParam))

        this.isTableList = true;
        this.$refs.table.refresh(true)
      }
    },
    orgSelect(org) {
      this.selectedOrg = org
      this.pagination.defaultCurrent = 1
      if (!org) {
        this.selectedKeys[0] = ''
        this.handleSearch(this.queryParam)
      }
    },
    /**
     *@desc  table表格搜索
     *@param {}
     */
    handleSearch(value) {
      // this.handleTable(value)
      value && (this.queryParam = value)
      this.$refs.table.refresh(true)
    },
    /**
     *@desc  table表格列表
     *@param {}
     */
    handleTable(params) {
      console.log('567890', params);
      let _this = this
      let searchData = {
        needCount: true,
        pageNo: _this.pagination.defaultCurrent,
        pageSize: _this.pagination.defaultPageSize,
        query: {
          ...params,
          orgId: _this.selectedKeys[0]
        }
      }

      
      queryAcloudPostManualList(searchData).then((res) => {
        if (res.code === 200) {
          _this.pagination.total = res.totalSize;
          _this.tableData = res.data
        }
      })
    },


    handleOperation(data) {
      // console.log('567890', data);
      this.isOpen = true;
      this.formDataObj = data;
    },

    // 弹窗回调
    dialogFn(obj) {
      // console.log('567890', obj);
      this.isOpen = false;
    }
  }
}
</script>
